<template>
  <!-- 拿到点击所在的icon及名字路由信息 -->
  <div class="nav_title">
    <div class="left_box">
      <svg-icon :icon-class="routerInfo.meta.icon ? routerInfo.meta.icon : ''"></svg-icon>
      <!-- <span class="metaTitle">{{ tableName ? tableName : routerInfo.meta.title }}</span> -->
      <span class="metaTitle">{{ routerInfo.meta.title ? routerInfo.meta.title : '' }}</span>
    </div>

    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, reactive, watch } from 'vue';
import { useRoute } from 'vue-router'; // 引入 useRouter
const route = useRoute();

const routerInfo: any = ref({});

const emit = defineEmits(['breadRouterClick']);

// 监听路由变化
watch(
  () => route,
  (to, from) => {
    // console.log('🚀 ~ to:', to);
    routerInfo.value = to;
  },
  { deep: true, immediate: true }
);

// 面包屑点击事件
const breadRouterClick = (item: any) => {
  emit('breadRouterClick', item); // 触发自定义事件
};
</script>

<style scoped lang="scss">
.nav_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  .left_box {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 15px;
  }
}
.metaTitle {
  margin-left: 8px;
  color: #333;
}
</style>
